<template>
    <div 
        class="Gen"
        ref="Gen"
        :style="{width:selfWidth+'px',height:selfHeight+'px'}">
        <Yang></Yang>
        <Yin></Yin>
        <Yin></Yin>
    </div>
</template>
<script>
import Yang from '@/components/Yang.vue'
import Yin from '@/components/Yin.vue'

export default {
    name:"Gen",
    data(){
        return{
            selfWidth:'',
            selfHeight:''
        }
    },
    props:{
         Width:{
            type:String,
            required:false,
            default:'100px'
        }
    },
    components:{
        Yang,
        Yin
    },
    mounted(){
        this.Calc()
    },
    methods:{
        Calc(){
            if(this.Width.indexOf('%')>-1){
                //this.Width是百分比
                this.selfWidth=this.Width
                this.selfWidth=this.$refs.Gen.offsetWidth
            }else{
                this.selfWidth=parseInt(this.Width)
                if(isNaN(this.selfWidth)){
                    this.selfWidth=1
                }
            }
            this.selfWidth=this.selfWidth<100?100:this.selfWidth
            this.selfHeight=this.selfWidth*3/4
        }
    }
}
</script>
<style scoped>
.Gen{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
</style>